<template>
  <div style="padding: 20px; max-width: 600px; margin: auto">
    <el-button
      type="primary"
      @click="dialogVisible = true"
      >确认</el-button
    >

    <el-dialog
      v-model="dialogVisible"
      title="轮播图展示"
      width="600px"
      :close-on-click-modal="false"
      :show-close="true"
    >
      <swiper
        ref="swiperRef"
        :modules="[Pagination]"
        :pagination="{ clickable: true }"
        style="width: 100%; height: 300px"
        @swiper="onSwiperInit"
        @slide-change="handleSlideChange"
      >
        <swiper-slide
          v-for="(img, index) in images"
          :key="index"
          style="text-align: center"
        >
          <img
            :src="img"
            alt="轮播图"
            style="width: 500px; object-fit: contain"
          />
        </swiper-slide>
      </swiper>

      <template #footer>
        <el-button
          @click="handleNext"
          type="primary"
          >下一步</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElButton, ElDialog } from "element-plus";
import "element-plus/dist/index.css";

import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination } from "swiper/modules";
import "swiper/swiper-bundle.css";

const dialogVisible = ref(false);

// 替换为 GIF 动图链接
const images = [
  "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif",
  "https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif",
  "https://media.giphy.com/media/xT9IgG50Fb7Mi0prBC/giphy.gif",
];

// swiper实例引用，类型为Swiper或null
const swiperRef = ref<InstanceType<typeof Swiper> | null>(null);

// 通过swiper事件获取swiper实例
const onSwiperInit = (swiperInstance: any) => {
  console.log("Swiper initialized:", swiperInstance);
  swiperRef.value = swiperInstance;
};

// 监听slide-change事件
const handleSlideChange = (swiperInstance: any) => {
  console.log("当前幻灯片索引:", swiperInstance.activeIndex);
};

const handleNext = () => {
  if (swiperRef.value) {
    swiperRef.value.slideNext();
    console.log("滑动到下一张", swiperRef.value.activeIndex);
  }
};
</script>

<style scoped>
/* 默认分页小点样式 */
</style>
